<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>确认购买</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.header {
		background-color: #fff;
		position: relative;
		z-index: 2000;
	}

	.wrapper {
		width: 1200px;
		padding: 0 5px;
		margin: 0 auto;
	}

	.header-cont {
		height: 80px;
		box-sizing: border-box;
	}

	.logo {
		float: left;
		margin: 15px 0 0 0;
	}

	.logo img {
		width: 200px;
		height: 50px;
	}

	.header-right {
		float: right;
		margin: 24px 0 0 0;
		width: 940px;
		height: 40px;
		background: image-set(url("img/train.png") 1x, url("img/train@2x.png") 2x);
		background-repeat: no-repeat;
		position: relative;
		z-index: 2000;
	}

	.header-search {
		width: 380px;
		float: left;
		margin: 5px 0 5px 90px;
	}

	.header-menu {
		float: right;
		padding-right: 10px;
	}

	.search-bd {
		width: 350px;
		position: relative;
	}

	.search-input {
		width: 100%;
		float: left;
		height: 30px;
		line-height: 20px;
		border: 1px solid #dedede;
		padding: 4px 10px;
		background-color: #fff;
		color: #333;
		outline: none;
		font-size: 14px;
		box-sizing: border-box;
	}

	.search-btn {
		float: left;
		width: 30px;
		color: #FFFFFF;
		height: 30px;
		line-height: 30px;
		background-color: #5696DE;
		border: none;
		text-align: center;
		cursor: pointer;
		outline: none;
	}

	.search-btn img {
		width: 16px;
		height: 16px;
	}

	.header-menu li {
		float: left;
		margin-left: 10px;
		height: 40px;
		line-height: 40px;
		font-size: 12px;
		position: relative;
		list-style: none;
		color: #3b99fc;
		font-size: 12px;
	}

	.menu-line {
		color: #acd1f9;
	}

	.menu-login a {
		color: #333;
		text-decoration: none;
		background-color: transparent;
		margin-left: 10px;
	}

	.nav-box {
		height: 40px;
		background-color: #3b99fc;
	}

	.nav {
		width: 1190px;
		margin: 0 auto;
		height: 40px;
		position: relative;
		z-index: 1900;
	}

	.nav li {
		list-style: none;
		width: 145px;
		float: left;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}

	.active {
		background-color: #2676e3;
		color: #fff;
	}

	h1 {
		font-size: 25px;
		color: #8C570F;
	}

	h2 {
		font-size: 20px;
	}

	.container {
		width: 980px;
		min-height: 620px;
		height: auto;
		margin: 0 auto;
	}

	.t_info {
		margin-top: 10px;
		width: 100%;
		height: auto;
		overflow: hidden;
		border: 1px solid #1678be;
		border-radius: 5px 5px 0 0;
	}

	.lay-hd {
		height: 32px;
		line-height: 32px;
		color: #e5f8ff;
		padding-left: 20px;
		font-size: 14px;
		position: relative;
		background: #278ACB;
	}

	.lay-bd {
		background: #eef1f8;
		padding: 0 10px 0;
		height: 98px;
	}

	.t-tit {
		border-bottom: 1px dashed #999;
		line-height: 32px;
		font-size: 12px;
	}

	.t-tit b {
		font-size: 16px;
		margin-left: 10px;
	}

	.price {
		line-height: 60px;
	}

	.price i {
		color: #fb7403;
		font-size: 20px;
		margin-left: 30px;
	}

	.btn {
		width: 92px;
		background: #FF8000;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		border-radius: 4px;
		float: right;
		text-decoration: none;
		font-size: 12px;
		margin-top: 15px;
	}
</style>

<body>

	<div class="content">
		<div class="header">
			<div class="wrapper">
				<div class="header-cont">
					<h1 class="logo">
						<img src="img/title.png" alt="">
					</h1>
					<div class="header-right">
						<div class="header-search">
							<div class="search-bd">
								<input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
							</div>
							<a href="javascript:;" class="search-btn">
								<img src="img/search.png" alt="">
							</a>
						</div>
						<ul class="header-menu">
							<li>无障碍</li>
							<li class="menu-line">|</li>
							<li>爱心版</li>
							<li class="menu-line">|</li>
							<li>English</li>
							<li class="menu-line">|</li>
							<li>我的12306</li>
							<li class="menu-line">|</li>
							<li class="menu-login">
								<a href="javascript:;">用户：admin</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="nav-box">
				<ul class="nav">
					<li>首页</li>
					<li class="active">车票</li>
					<li>团购服务</li>
					<li>会员服务</li>
					<li>站车服务</li>
					<li>商旅服务</li>
					<li>出现指南</li>
					<li>信息查询</li>
				</ul>
			</div>
		</div>
		<div class="container">
			<div class="t_info">
				<div class="lay-hd">车票信息</div>
				<div class="lay-bd">
					<p class="t-tit">
						<b style="margin-left: 0;">2020-1-20</b>
						<b>G2308</b>次
						<b>成都东</b>站
						<b style="margin-right: 10px">(12:30:00开)</b>--
						<b>北京西</b>站
					</p>
					<div class="price">
						<b>座位号:4-13A</b>
						<i>票价:￥700</i>
						<a href="#" class="btn">确认付款</a>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>